<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>window</title>
    <style>
        .ys{
            background-color: #ffb8a1;
            font-size: large;
        }

        .kg{
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>


<div id="app">

    <button @click="st='ys'">点我加样式</button>
    <p v-bind:class="st">
        又开始下雨了
    </p>



    <p :class="{ys:show,kg:haha}">
        测试样式改变
    </p>
</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
            el: "#app",
            data:{
                st:"",
                show:false,
                haha:false
            }

        })
    ;
</script>
</body>
</html>